<template>
<div class="form-list">

    <div class="form-content">
        <div class="form-head form-head-one">
          <h1>商标注册申请书</h1>
        </div>
        <el-form :label-positon="labelPosition" label-width="290px" size="mini">
            <!-- 申请人名称 -->
            <el-form-item label="申请人名称(中文)：">
                <span>{{ formData.appName }}</span>
            </el-form-item>
            <el-form-item label="(英文)：">
                <span>{{ formData.appNameEn }}</span>
            </el-form-item>

            <el-form-item label="申请人国籍/地区：">
                <span>{{ formData.appNat }}</span>
            </el-form-item>

            <el-form-item label="申请人地址(中文)：">
                <span>{{ formData.busAddress }}</span>
            </el-form-item>
            <el-form-item label="(英文)：">
                <span>{{ formData.appAddEn }}</span>
            </el-form-item>

            <el-form-item label="邮政编码：">
                <span>{{ formData.postCode }}</span>
            </el-form-item>

            <el-form-item label="联系人：">
                <span>{{ formData.contacts }}</span>
            </el-form-item>

             <el-form-item label="邮箱：">
                <span>{{ formData.email }}</span>
            </el-form-item>

            <el-form-item label="电话：">
                <span>{{ formData.phone }}</span>
            </el-form-item>

            <!-- 这先隐藏起来 20200826 2007-->
            <el-form-item label="代理机构名称：">
                <span>{{ formData.deptName }}</span>
            </el-form-item>

            <el-form-item label="外国申请人的国内接收人：">
                <span>{{ formData.receCn }}</span>
            </el-form-item>

            <!-- 这先隐藏起来 20200826 2007-->
            <el-form-item label="国内接收人地址：">
                <span>{{ formData.receAddCn }}</span>
            </el-form-item>

            <el-form-item label="邮政编码：">
                <span>{{ formData.recePost }}</span>
            </el-form-item>

            <el-form-item label="商标申请声明：" v-if="formData.decTraAppModel == 0">

                <template>
                    <div class="same-line-s">
                        <span v-if="formData.decTraApp.some(item=>item==0)">申请注册<br></span>
                        <span v-if="formData.decTraApp.some(item=>item==1)">证明商标<br></span>
                        <span v-if="formData.decTraApp.some(item=>item==2)">以三维标志申请商标注册<br></span>
                        <span v-if="formData.decTraApp.some(item=>item==3)">以声音标志申请商标注册<br></span>
                        <span v-if="formData.decTraApp.some(item=>item==4)">以颜色组合申请商标注册<br></span>
                        <span v-if="formData.decTraApp.some(item=>item==5)">两个以上申请人共同申请注册同一商标<br></span>
                    </div>
                </template>

            </el-form-item>

            <!-- <el-form-item class="inline">
                <template>
                    <div class="same-line-s">
                        <span class="shangbiao-opt" v-if="formData.decTraApp.includes('0')">以三维标志申请商标注册</span>
                        <span class="shangbiao-opt" v-if="formData.decTraApp.includes('2')">以颜色组合申请商标注册</span>
                    </div>
                    <div class="same-line-s">
                        <span class="shangbiao-opt" v-if="formData.decTraApp.includes('1')">以声音组合申请商标注册</span>
                        <span class="shangbiao-opt" v-if="formData.decTraApp.includes('3')">两个以上申请人共同申请注册同一商标</span>
                    </div>
                </template>
            </el-form-item> -->

            <!-- 暂时隐藏 20200826 20:17 -->
            <!-- <el-form-item label="要求优先级声明：" v-if="false">
                <el-checkbox-group v-model="formData.priority">
                    <template>
                        <div class="same-line-s">
                            <el-checkbox label="基于第一次申请的优先权"></el-checkbox>
                            <el-checkbox label="基于展会的优先权"></el-checkbox>
                            <el-checkbox label="优先权证明文件后补"></el-checkbox>
                        </div>
                    </template>
                </el-checkbox-group>
            </el-form-item> -->

            <el-form-item label="申请/展出国家/地区：">
                <span>{{ formData.appCount }}</span>
            </el-form-item>

            <el-form-item label="申请/展出日期：">
                <span>{{ formData.appDate }}</span>
            </el-form-item>

            <el-form-item label="申请号：">
                <span>{{ formData.appNum }}</span>
            </el-form-item>

        </el-form>
    </div>

    <!-- <div class="form-content form-sign">
        <el-form :label-positon="labelPosition" label-width="240px" size="mini">
            <template>
                <div class="same-line">
                    <el-form-item label="申请人章戳(签字):">
                        <span></span>
                    </el-form-item>
                    <el-form-item label="代理机构章戳:"></el-form-item>
                </div>
            </template>
            <template>
                <el-form-item label="代理人签字:"></el-form-item>
            </template>
        </el-form>
    </div> -->

    <!-- 暂时隐藏 20200826 20:17 -->
    <!-- <div class="form-content form-txt" v-if="false">
        <span class="icon-txt">
            下框为商标图样粘贴处。图样应当不大于10×10cm，不小于5×5cm。以颜色组合或者着色图样申请商标注册的，应当提交着色图样并提交黑白稿1份；不指定颜色的，应当提交黑白图样。以三维标志申请商标注册的，应当提交能够确定三维形状的图样，提交的商标图样应当至少包含三面视图。以声音标志申请商标注册的，应当以五线谱或者简谱对申请用作商标的声音加以描述并附加文字说明；无法以五线谱或者简谱描述的，应当使用文字进行描述；商标描述与声音样本应当一致。
        </span>
    </div> -->

    <!-- 商标上传 -->
    <!-- 暂时隐藏 20200826 20:17 -->
    <!-- <div class="white-block form-content" v-if="false"></div>
    <div class="img-block form-content" v-if="false">
        <div class="img-icon"></div>
    </div>
    <div class="white-block-two form-content" v-if="false"></div> -->

    <div class="form-content">
        <el-form :label-positon="labelPosition" label-width="280px" size="mini">
            <el-form-item label="商标说明：">
                <span>{{ formData.appExpl }}</span>
            </el-form-item>

            <el-form-item label="类别：">
                <span>{{ formData.appModel }}</span>
            </el-form-item>

            <!-- 暂时隐藏 20200826 20:17 -->
            <el-form-item label="商品/服务项目：" class="serve-list" >
                <span v-for="item in formData.serIte" :key="item.id">{{ item }}</span>
            </el-form-item>

            <el-form-item label="营业执照：" class="busimg-img" >
               <imgshow> <img :src="this.mconfig.host+formData.busimg" alt /></imgshow>
            </el-form-item>
            <el-form-item label="身份证正反面：" class="idcard-img" v-if="formData.appliType==1">
               <imgshow> <img :src="this.mconfig.host+formData.idcardface" alt /></imgshow>
            </el-form-item>
            <el-form-item label="网上确认书：" class="busimg-img" >
               <imgshow> <img :src="this.mconfig.host+formData.qrfile" alt /></imgshow>
            </el-form-item>
            <el-form-item label="其他证明：" class="busimg-img" v-if="formData.otherfile.length > 0">
              <!-- v-if="formData.otherfile != []" -->
                <div v-for="(item,index) in formData.otherfile" :key="index">
                  <imgshow> <img :src="mconfig.host+item" alt /></imgshow>
                </div>
            </el-form-item>
            <!-- 新增 -->
            <div class="accessory" v-if="formData.decTraAppModel == 0"> 
              <h2>附件下载：</h2>
              <!-- //附件标签样式 -->
              <el-form-item label="集体商标使用规则附件：" class="busimg-img" v-if="ArrFn(formData.jtuserulefile)" >
                <imgArrShow :Arr="JSON.parse(formData.jtuserulefile)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="集体成员名单其他附件：" class="busimg-img" v-if="ArrFn(formData.jtusepepleotherfile)">
                <imgArrShow :Arr="JSON.parse(formData.jtusepepleotherfile)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="证明商标使用规则（附件）：" class="busimg-img" v-if="ArrFn(formData.zhengmingrule)">
                <imgArrShow :Arr="JSON.parse(formData.zhengmingrule)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="证明商标使用规则(其他附件)：" class="busimg-img" v-if="ArrFn(formData.zhengmingrulefile)" >
                <imgArrShow :Arr="JSON.parse(formData.zhengmingrulefile)" ></imgArrShow>
              </el-form-item>
              <!-- 5 -->
              <el-form-item label="申请人与具有检测资格的机构签署的委托检测合同：" v-if="ArrFn(formData.ischeckabilityfile1)" class="busimg-img" >
                <imgArrShow :Arr="JSON.parse(formData.ischeckabilityfile1)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="受委托机构的单位法人证书（附件）：" class="busimg-img" v-if="ArrFn(formData.ischeckabilityfile2)" >
                <imgArrShow :Arr="JSON.parse(formData.ischeckabilityfile2)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="受委托机构资质证书（附件）：" class="busimg-img" v-if="ArrFn(formData.ischeckabilityfile3)" >
                <imgArrShow :Arr="JSON.parse(formData.ischeckabilityfile3)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="专业检测设备清单（附件）" class="busimg-img" v-if="ArrFn(formData.ischeckabilityfile4)" >
                <imgArrShow :Arr="JSON.parse(formData.ischeckabilityfile4)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="专业技术人员名单（附件）：" class="busimg-img" v-if="ArrFn(formData.ischeckabilityfile5)">
                <imgArrShow :Arr="JSON.parse(formData.ischeckabilityfile5)" ></imgArrShow>
              </el-form-item>
            
              <!-- 地理标志 -->
              <el-form-item label="地理标志材料一：" class="busimg-img" v-if="ArrFn(formData.gmaterials1)" >
                <imgArrShow :Arr="JSON.parse(formData.gmaterials1)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="地理标志材料二：" class="busimg-img" v-if="ArrFn(formData.gmaterials2)" >
                <imgArrShow :Arr="JSON.parse(formData.gmaterials2)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="地理标志材料三：" class="busimg-img" v-if="ArrFn(formData.gmaterials3)" >
                <imgArrShow :Arr="JSON.parse(formData.gmaterials3)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="地理标志材料四：" class="busimg-img"  v-if="ArrFn(formData.gmaterials4)">
                <imgArrShow :Arr="JSON.parse(formData.gmaterials4)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="地理标志材料五：" class="busimg-img" v-if="ArrFn(formData.gmaterials5)">
                <imgArrShow :Arr="JSON.parse(formData.gmaterials5)" ></imgArrShow>
              </el-form-item>
              <!-- 申请人专业 -->
              <el-form-item label="申请人专业检测设备清单(附件)：" class="busimg-img" v-if="ArrFn(formData.shenqingnengfile1)"  >
                <imgArrShow :Arr="JSON.parse(formData.shenqingnengfile1)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="申请人专业检测设备清单(附件)：" class="busimg-img" v-if="ArrFn(formData.shenqingnengfile2)"  >
                <imgArrShow :Arr="JSON.parse(formData.shenqingnengfile2)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="申请人专业技术人员名单：" class="busimg-img" v-if="ArrFn(formData.shenqingnengfile3)" >
                <imgArrShow :Arr="JSON.parse(formData.shenqingnengfile3)" ></imgArrShow>
              </el-form-item>
              
              <el-form-item label="申请人技术人员证书(附件)：" class="busimg-img" v-if="ArrFn(formData.shenqingnengfile4)"  >
                <imgArrShow :Arr="JSON.parse(formData.shenqingnengfile4)" ></imgArrShow>
              </el-form-item>

              <el-form-item label="专业技术人员名单：" class="busimg-img" v-if="ArrFn(formData.shenqingnengfile5)"  >
                <imgArrShow :Arr="JSON.parse(formData.shenqingnengfile5)" ></imgArrShow>
              </el-form-item>
            </div>
        </el-form>
    </div>

    <!-- 暂时隐藏 20200826 20:17 -->
    <div class="form-head form-content" v-if="formData.decTraApp.some(item=>item==5)">
        <h1>商标注册申请书(附页)</h1>
        <p class="icon-apply">其他共同申请人名称列表</p>

        <div v-if="append.length">
            <el-form class="model-form" label-width="280px" size="small" label-position="right">
                <div v-for="(item,index) in append" :key="index">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item :label="index+1 + '.申请人(中文)：' ">
                                <span>{{item.partNameCh}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="(英文)：">
                                <span>{{item.partNameEn}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item :label="index+2 + '.营业执照：'" >
                            <imgshow>
                                <img  :src="newUrl(item.busimg)" alt />
                            </imgshow>
                            </el-form-item>
                            <el-form-item
                            v-if="item.idcardimg !== ''"
                            :label="index+3 + '.身份证(正反面)：'"
                            >
                            <imgshow>
                                <img style="margin-top:10px;" :src="newUrl(item.idcardimg)" alt />
                            </imgshow>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>

    </div>
</div>
</template>

<script>

import imgshow from "../common/imgshow";
import imgArrShow from "../common/imgArrShow"


export default {
    components:{
      imgshow,imgArrShow
      }, 
    data() {
      
        return {
           test:[1,2,3,4],
            // 商标注册申请
            // 右对齐
            labelPosition: "right",
            // 字段名
            formData: {
                otherfile:[], //
                ageName: "", // 代理机构名称
                appAddCn: "", // 申请人地址(中文)
                appAddEn: "", // 申请人地址(英文)
                appCount: "", // 申请/展出国家/地区
                appDate: "", // 申请/展出日期
                appExpl: "", // 商标说明
                appImgAdd: [], // 商标图片上传
                appModel: "", // 类别
                appNameCn: "", // 申请人名称(中文)
                appNameEn: "", // 申请人名称(英文)
                appNat: "", // 申请人国际/地区
                appNum: "", // 申请号
                branchNetworkId: "", // 网点编号
                cardNum: "", // 身份证号
                contacts: "", // 联系人
                decTraApp: [], // 商标申请声明
                decTraAppModel: "1", //商标申请申明类型
                id: "", // 主键
                imgAdd: [], // 身份证或者营业执照地址
                phone: "", // 电话
                postCode: "", // 邮政编码
                priority: [], // 要求优先权声明
                proAppendJson: "", // 共享人json
                receAddCn: "", // 国内接收人地址
                receCn: "", // 外国申请人的国内接收人
                recePost: "", // 国内接收人邮政编码
                serIte: "", // 商标/服务项目
                subStatus: "1", // 状态
                userId: "", // 用户id
                jtuserulefile:[],//集体商标使用规则附件
                jtusepepleotherfile:[],//集体成员名单其他附件
                zhengmingruletext:'',//证明商标使用管理规则
                zhengmingrule:[],//证明商标使用规则（附件）
                zhengmingrulefile:[],//证明商标使用规则(其他附件)
                ischeckability:0,//是否具备检测能力
                gmaterials1:[],//地理标志材料一
                gmaterials2:[],//地理标志材料二
                gmaterials3:[],//地理标志材料三
                gmaterials4:[],//地理标志材料四
                gmaterials5:[],//地理标志材料五
                ischeckabilityfile1:[],//申请人与具有检测资格的机构签署的委托检测合同（附件）
                ischeckabilityfile2:[],//受委托机构的单位法人证书（附件）
                ischeckabilityfile3:[],//受委托机构资质证书（附件）
                ischeckabilityfile4:[],//专业检测设备清单（附件）
                ischeckabilityfile5:[],//专业技术人员名单（附件）
                shenqingnengfile1:[],//申请人专业检测设备清单(附件)
                shenqingnengfile2:[],//申请人专业检测设备清单(附件)
                shenqingnengfile3:[],//申请人专业技术人员名单
                shenqingnengfile4:[],//申请人技术人员证书(附件)
                shenqingnengfile5:[],//专业技术人员名单
            },
            //其他申请人
            append: [],
            stairmodel: [],
            stairmodelList: []
        };
    },
    methods: {
        ArrFn(_arr){
         
          _arr = JSON.parse(_arr);
         
          var result = false

          if( _arr.length != 0){
            result = true
            console.log(true);
          }
          return result
        },
        newUrl(_url) {
                //图片地址
                var newURL = this.mconfig.host + _url;
                // console.log(this.mconfig.host)
                return newURL;
                },
        funb(s) {
            var _this = this;
            return this.$http
                .get("/trademark/proTRegMark/findByIdDetl", {
                    params: {
                        id: s
                    },
                })
                .then((res) => {
                    console.log(res);
                    res.data.data.data.decTraApp = JSON.parse(res.data.data.data.decTraApp);
                    var isArray = res.data.data.data.decTraApp instanceof Array;
                    
                    if (!isArray) {
                        res.data.data.data.decTraApp = new Array(res.data.data.data.decTraApp);
                    }
                    _this.formData.decTraAppModel = [res.data.data.data.decTraAppModel];
                    _this.formData = res.data.data.data || {};
                    _this.formData.serIte = JSON.parse(_this.formData.serIte);
                    _this.formData.otherfile = JSON.parse(_this.formData.otherfile);
                    
                    _this.append = res.data.data.append || [];
                    // _this.getServeList(_this.formData.appModel);
                   
                });
        },
        getServeList(p) {
            //获取商品服务列表
            this.$http.get("trademark/tradeCategory/s/" + p).then((res) => {
                if (res.data.code == 200 && res.data.data) {
                    this.stairmodel = res.data.data;
                    var arr = [];
                    var serIte = this.formData.serIte || "";
                    
                    serIte = serIte.replace("[", "")
                    serIte = serIte.replace("]", "")
                    serIte = serIte.split(",")

                    this.stairmodel.forEach(e => {
                        serIte.forEach(el => {
                            if (e.id == el) {
                                arr.push(e.category);
                            }
                        })
                    })
                    this.stairmodelList = arr.join(";");
                }
            });
        },
    },
    computed: {
       
    },

    mounted() {
        this.id = this.$route.query.id
        this.funb(this.id);
    },
};
</script>

<style scoped>
.accessory h2{
  font-size: 20px;
  margin-left: 100px;
  line-height: 35px;
  font-weight: 600;
}
.accessory .busimg-img{
  font-size: 14px;
}
.form-list {
   
    display: inline-block;
    margin-left:200px;
}

.idcard-img img,
.busimg-img img {
    display: inline-block;
    margin: 0 5px;
}

.busimg-img img {
 
}

.idcard-img img {
    width: 300px;
}

.idcard-img {
    width: 300px;
    margin-top: 10px !important;
}

.busimg-img {
    width: 500px;
    margin-top: 10px !important;
}

.shangbiao-opt {
    margin-right: 15px;
}

.form-head {
    /* text-align: center; */
}

.form-head h1{
  padding-left: 140px;
  font-size: 25px ;
  font-weight: 600;
}
.form-head p {
    font-size: 22px;
    font-weight: normal;
    text-align: center;
        margin: 120px auto 20px auto;
    max-width: 485px;
    line-height: 45px;
}

.form-head-one h1 {
    font-size: 25px;
    margin: 50px auto 40px auto;
}

.form-head p {
    font-size: 18px;
    margin: 20px 0;
}

.form-content {
    width: 768px;
    margin: 0 auto;
}

.form-list /deep/ .el-form-item__label {
    padding-right: 0;
    font-size: 18px;
    border-bottom: none;
    height: 30px;
}
.accessory /deep/ .el-form-item__label {
    padding-right: 0;
    font-size: 14px;
    border-bottom: none;
    height: 30px;
}

.form-list /deep/ .el-form-item__content {
    font-size: 18px;
    border-left: none;
    border-bottom: none;
    /* padding-left: 10px; */
    height: auto;
    box-sizing: border-box;
    word-break: break-word;
}

.form-list ::v-deep .el-form-item {
    margin: 0;
}

.form-list .el-input.el-input--mini {
    font-size: 14px;
}

.same-line {
    display: flex;
    justify-content: space-between;
}

.same-line .sign {
    font-size: 18px;
    color: rgb(191, 191, 191);
}

.same-line .el-form-item {
    width: 50%;
}

.same-line-s /deep/ .el-checkbox {
    /* width: 20%; */
    text-align: left;
    margin-right: 0;
}

.same-line-s /deep/ .el-checkbox.shangbiaozhengming {
    margin-left: 123px;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
    font-size: 18px;
}

.img-box {
    width: 150px;
    height: 150px;
    display: flex;
}

.img-box img {
    margin-right: 10px;
    width: 100%;
    height: 100%;
}

.form-list .signs .el-row {
    margin: 150px 0;
}

.form-list .el-row .el-col {
    text-align: left;
}

.form-list .el-row .el-col span {
    font-size: 18px;
}

.form-list /deep/ .el-form-item__label {
    /* border: 1px dashed #000; */
    border-bottom: none;
    border-right: none;
}

.form-list /deep/ .el-form-item__label:last-child {
    /* border-bottom: 1px dashed #000; */
}

.form-list /deep/ .el-form-item__content {
    /* border: 1px dashed #000; */
    border-bottom: none;
}

.form-list /deep/ .el-form-item:last-child .el-form-item__content {
    /* border-bottom: 1px dashed #000; */
}

.form-list /deep/ .el-form-item:last-child .el-form-item__label {
    /* border-bottom: 1px dashed #000; */
}

.form-list /deep/ .el-form-item {
    margin: 0;
}

.same-line-s /deep/ .el-checkbox {
    /* border-right: 1px dashed #000; */
}

.same-line-s /deep/ .el-checkbox:last-child {
    border: 0;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
    font-size: 18px;
}

.form-sign {
    margin-top: 50px;
}

.form-sign.form-content .same-line /deep/ .el-form-item:last-child .el-form-item__label {
    border-bottom: none;
    border-left: none;
}

.form-sign.form-content .same-line /deep/ .el-form-item__content {
    border-bottom: none;
}

.form-txt {
    text-indent: 2em;
    /* border: 1px dashed #000; */
    box-sizing: border-box;
    margin-top: 50px;
}

.white-block {
    height: 20px;
    /* border: 1px dashed #000; */
    border-top: none;
    box-sizing: border-box;
}

.white-block-two {
    height: 50px;
    /* border: 1px dashed #000; */
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
}

.img-block {
    /* border: 1px dashed #000; */
    border-top: none;
    box-sizing: border-box;
}

.img-icon {
    width: 450px;
    height: 450px;
    border: 1px solid #000;
    margin: 0 auto;
}

.icon-apply {
    text-align: left;
}

.icon-txt {
    font-size: 18px;
}
</style>
